﻿<template id="@(ViewBag.GetCompTemplate("role"))">
    <el-dialog v-model="visible" :width="1200" :title="title" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false" draggable v-on:close="closed">
        <el-divider class="layout-page-form-top-border"></el-divider>
        <el-row :gutter="12">
            <el-col :span="15">
                <single_table :api="`${path}/getrole`" :height="height" :border="true" row-key="Id" ref="rRef" :hide-column-filter="true">
                    <template #header-left="scope">
                        <el-button type="primary" v-on:click="addAll">添加全部</el-button>
                        <el-button type="primary" plain :disabled="!scope.isSelected" v-on:click="addList(scope.selectedList)">添加选中</el-button>
                    </template>
                    <template #default>
                        <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                        <el-table-column prop="Title" label="角色名称" width="150" align="center"></el-table-column>
                        <el-table-column prop="Remark" label="角色介绍" align="center"></el-table-column>
                        <el-table-column label="状态" width="100" align="center">
                            <template #default="scope">
                                <el-tag v-if="scope.row.Status=='ok'" type="success">启用</el-tag>
                                <el-tag v-else type="info">停用</el-tag>
                            </template>
                        </el-table-column>
                        <single_table_operation count="1">
                            <template #default="scope">
                                <el-button type="primary" icon="Plus" link v-on:click="addList([scope.row])">添加</el-button>
                            </template>
                        </single_table_operation>
                    </template>
                </single_table>
            </el-col>
            <el-col :span="9">
                <single_table :api="`${path}/getuserrole`" :base-query="{id}" :height="height" :border="true" row-key="Id" ref="urRef" :hide-header-right="true">
                    <template #header-left="scope">
                        <el-button type="danger" v-on:click="delAll">删除全部</el-button>
                        <el-button type="danger" plain :disabled="!scope.isSelected" v-on:click="delList(scope.selectedListIds)">删除选中</el-button>
                    </template>
                    <template #header-right="scope">
                        <span class="page-table-header-right-span">已选: {{scope.dataList.length}} 项</span>
                    </template>
                    <template #default>
                        <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                        <el-table-column prop="SysRole.Title" label="角色名称" align="center"></el-table-column>
                        <el-table-column label="状态" width="100" align="center">
                            <template #default="scope">
                                <el-tag v-if="scope.row.SysRole.Status=='ok'" type="success">启用</el-tag>
                                <el-tag v-else type="info">停用</el-tag>
                            </template>
                        </el-table-column>
                        <single_table_operation count="1">
                            <template #default="scope">
                                <el-button type="primary" icon="Delete" link v-on:click="delList([scope.row.Id])">删除</el-button>
                            </template>
                        </single_table_operation>
                    </template>
                </single_table>
            </el-col>
        </el-row>
        <template #footer>
            <el-button v-on:click="close">取消</el-button>
            <el-button type="primary" v-on:click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>
<script type="text/javascript">
    var @(ViewBag.GetCompName("role")) = {
        template: "#@(ViewBag.GetCompTemplate("role"))", data() {
            return {
                path: "@(ViewBag.PagePath)",
                visible: false,
                title: null,
                id: null,
                tempId: 1,
                height: 400
            }
        },
        methods: {
            open(row){
                var that = this;
                that.id = row.Id;
                that.title = `配置角色（${row.Name}）`;
                that.visible = true;
            },
            close(){
                this.visible = false;
            },
            closed(){
                this.id = null;
                this.title = null;
            },
            submit(){
                var that = this;
                var rows = that.$refs.urRef.processTableData;
                app.func.submit(`${that.path}/setrole`, { userId: that.id, rows }, that.close);
            },
            addAll(){
                var that = this;
                var rows = that.$refs.rRef.processTableData;
                that.addList(rows);
            },
            addList(rows){
                var that = this;
                var existRows = that.$refs.urRef.processTableData;
                rows.forEach(m => {
                    if (!existRows.some(e => e.RoleId == m.Id)) {
                        existRows.push({
                            Id: that.tempId++,
                            UserId: that.id,
                            RoleId: m.Id,
                            SysRole: m
                        });
                    }
                });
            },
            delAll(){
                this.$refs.urRef.processTableData = [];
            },
            delList(ids){
                this.$refs.urRef.processTableData = this.$refs.urRef.processTableData.filter(m => ids.indexOf(m.Id) == -1);
            }
        },
        mounted() { }
    };
</script>